<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    @close="resetForm"
  >
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
      <el-form-item label="所属小区" prop="districtName">
        <el-input v-model="form.districtName" placeholder="请输入所属小区"></el-input>
      </el-form-item>
      <el-form-item label="栋数" prop="buildingCode">
        <el-input v-model="form.buildingCode" placeholder="请输入栋数"></el-input>
      </el-form-item>
      <el-form-item label="房产名称" prop="propertyName">
        <el-input v-model="form.propertyName" placeholder="请输入房产名称"></el-input>
      </el-form-item>
      <el-form-item label="户主名称" prop="ownerName">
        <el-input v-model="form.ownerName" placeholder="请输入户主名称"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="contactNumber">
        <el-input v-model="form.contactNumber" placeholder="请输入联系方式"></el-input>
      </el-form-item>
      <el-form-item label="房间数" prop="roomCount">
        <el-input v-model.number="form.roomCount" type="number" placeholder="请输入房间数"></el-input>
      </el-form-item>
      <el-form-item label="单元" prop="unit">
        <el-input v-model.number="form.unit" type="number" placeholder="请输入数字"></el-input>
      </el-form-item>
      <el-form-item label="楼层" prop="floor">
        <el-input v-model.number="form.floor" type="number" placeholder="请输入数字"></el-input>
      </el-form-item>
      <el-form-item label="入住时间" prop="moveInTime">
        <el-date-picker v-model="form.moveInTime" type="date" placeholder="入住时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input type="textarea" v-model="form.description" :rows="4" placeholder="请输入描述"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    editData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      form: {
        id: null, // 添加 id 字段
        districtName: '',
        buildingCode: '',
        propertyName: '',
        ownerName: '',
        contactNumber: '',
        roomCount: null,
        unit: null,
        floor: null,
        moveInTime: null,
        description: ''
      },
      rules: {
        districtName: [
          { required: true, message: '请输入所属小区', trigger: 'blur' }
        ],
        buildingCode: [
          { required: true, message: '请输入栋数', trigger: 'blur' }
        ],
        propertyName: [
          { required: true, message: '请输入房产名称', trigger: 'blur' }
        ],
        ownerName: [
          { required: true, message: '请输入户主名称', trigger: 'blur' }
        ],
        contactNumber: [
          { required: true, message: '请输入联系方式', trigger: 'blur' }
        ],
        roomCount: [
          { required: true, message: '请输入房间数', trigger: 'blur' },
          { type: 'number', message: '房间数必须为数字值', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '请输入单元', trigger: 'blur' },
          { type: 'number', message: '单元必须为数字值', trigger: 'blur' }
        ],
        floor: [
          { required: true, message: '请输入楼层', trigger: 'blur' },
          { type: 'number', message: '楼层必须为数字值', trigger: 'blur' }
        ],
        moveInTime: [
          { required: true, message: '请选择入住时间', trigger: 'change' }
        ]
      }
    };
  },
  computed: {
    dialogTitle() {
      return this.editData ? '编辑' : '添加';
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val;
      if (!val) {
        this.resetForm();
      }
    },
    editData: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.form = { ...newVal };
        } else {
          this.resetForm();
        }
      }
    }
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    resetForm() {
      this.form = {
        id: null, // 重置 id 字段
        districtName: '',
        buildingCode: '',
        propertyName: '',
        ownerName: '',
        contactNumber: '',
        roomCount: null,
        unit: null,
        floor: null,
        moveInTime: null,
        description: ''
      };
      if (this.$refs.formRef) {
        this.$refs.formRef.resetFields();
      }
    },
    handleSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 提交表单数据
          if (this.editData) {
            // 编辑模式，保留id字段
            this.$emit('submit', { ...this.form, id: this.editData.id });
          } else {
            // 添加模式，不保留id字段
            this.$emit('submit', {...this.form, propertyCode: `HM${new Date().getFullYear()}${String(new Date().getMonth() + 1).padStart(2, '0')}${String(new Date().getDate()).padStart(2, '0')}${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}`,});
          }
          this.dialogVisible = false;
        } else {
          console.log('表单验证失败!');
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
/* 可添加样式 */
</style>